<script setup>
import { onMounted } from 'vue';
////////////////////////////* 引入组件 *////////////////////////////
import SiderLeft from '@/components/modules/SiderLeft.vue'
import SiderRight from '@/components/modules/SiderRight.vue'
onMounted(() => {
})
</script>
<template>
  <SiderLeft/>
  <sider-right>
      <router-view v-slot="{ Component }">
        <Transition>
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </Transition>
    </router-view>
  </sider-right>
</template>

<style lang="scss" scoped>
.content {
  position:absolute;
  right:0px;
  width: calc(100vw - 275px);
}
/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.2s;
}
/* 可能为enter失效，拆分为 enter-from和enter-to */
.fade-transform-enter-from {  
  opacity: 0;
  transform: translateX(-130px);
}
.fade-transform-enter-to { 
  opacity: 1;

  transform: translateX(0px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(-130px);
}
</style>
